<template>
    <div class="messageDemo">
        <treeSelect
            :treeProps="props"
            :options="treeSelectList"
            v-model="valueId"
            :clearable="isClearable"
            :accordion="isAccordion"
            :expandNode="false"
            size="small"
            width="100%"
            @getValue="getValue($event)"
        />

        <!-- <el-main>
                <span>父子不互相关联：check-strictly=true</span>
                <treeSelect
                    :multiple="true"
                    :collapse="false"
                    :checkStrictly="true"
                    :treeProps="props"
                    :options="treeSelectList"
                    v-model="valueIds"
                    :clearable="isClearable"
                    :accordion="isAccordion"
                    :expandNode="false"
                    size="small"
                    width="360px"
                    @getValue="getValue2($event)"
                />
            </el-main> -->
        <!-- <el-main>
                <span>父子互相关联：check-strictly=false</span>
                <treeSelect
                    :multiple="true"
                    :collapse="false"
                    :treeProps="props"
                    :options="treeSelectList"
                    v-model="valueIds2"
                    :clearable="isClearable"
                    :accordion="isAccordion"
                    :expandNode="false"
                    size="small"
                    width="360px"
                    @getValue="getValue2($event)"
                />
            </el-main> -->
    </div>
</template>

<!-- JS -->
<script>
import treeSelect from "@/components/customComponents/customForm/treeSelect.vue"
export default {
    components: {
        treeSelect
    },
    data() {
        return {
            props: {
                // 配置项（必选）
                id: "id",
                label: "name",
                pid: "parentId",
                children: "children"
                // disabled:true
            },
            // 数组
            list: [
                {id: 1, parentId: 0, name: "一级菜单A", rank: 1},
                {id: 2, parentId: 0, name: "一级菜单B", rank: 1},
                {id: 3, parentId: 0, name: "一级菜单C", rank: 1},
                {id: 4, parentId: 1, name: "二级菜单A-A", rank: 2},
                {id: 5, parentId: 1, name: "二级菜单A-B", rank: 2},
                {id: 6, parentId: 2, name: "二级菜单B-A", rank: 2},
                {id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3},
                {id: 15, parentId: 0, name: "一级菜单C", rank: 1},
                {id: 16, parentId: 0, name: "一级菜单C", rank: 1},
                {id: 17, parentId: 0, name: "一级菜单C", rank: 1},
                {id: 18, parentId: 0, name: "一级菜单C", rank: 1}
            ],
            treeSelectList: [],
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            valueId: null, // 初始ID（可选）
            valueIds: [],
            valueIds2: []
        }
    },
    created() {
        this.initData()
    },
    methods: {
        initData() {
            this.treeSelectList = this.listToTree(this.list, this.props)
            console.log(this.treeSelectList)
        },
        /**
         * @description        数组转树形数据
         * @param {数据数组}    list
         * @param {树结构配置}  config
         */
        listToTree(list, config) {
            let conf = {}
            Object.assign(conf, config)
            const nodeMap = new Map()
            const result = []
            const {id, pid} = conf
            for (const node of list) {
                // node[children] = node[children] || [];
                nodeMap.set(node[id], node)
            }
            for (const node of list) {
                const parent = nodeMap.get(node[pid])
                ;(parent ? (parent.children ? parent.children : (parent.children = [])) : result).push(node)
            }
            return result
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log("getValue", value, this.valueId)
        },
        // 树形选择器 - 取值
        getValue2(value) {
            // this.valueId = value
            console.log("getValue2", value, this.valueIds)
        }
    },
    watch: {
        valueId() {
            console.log("valueId", this.valueId)
        },
        valueIds() {
            console.log("valueIds", this.valueIds)
        }
    }
}
</script>
